<!doctype html>

<html lang="<%=page.language%>">

<% include header.ejs %>

<body id="data">

<script>
  function warnUser(message) {
    $('#right_cont').html("<p class='warning'>" + message + "</p>");
  };

  function initForm() {
    $("#formdata #submitter")
        .button({ icons: { primary: "ui-icon-check"}, text: true})
        .click(function(){
      $("#formdata #request").val("save");
      $("#formdata").submit();
    });

    $("#formdata #doCancel")
        .button({ icons: { primary: "ui-icon-close"}, text: true})
        .click(function(){
      $("#formdata #request").val("list");
      $("#formdata").submit();
    });

    $("#formdata #doDelete")
        .button({ icons: { primary: "ui-icon-trash"}, text: true})
        .click(function(){
      $("#formdata #request").val("delete");
      $("#formdata").submit();
    });
  }

$(document).ready(function(){
  $("#formdata #doSendMail")
      .button({ icons: { primary: "ui-icon-mail-closed"}, text: true})
      .click(function(){
    $("#formdata #request").val("sendmail");
    $("#formdata").submit();
  });
  $("#formdata #doTestMail")
      .button({ icons: { primary: "ui-icon-person"}, text: true})
      .click(function(){
    $("#formdata #request").val("testmail");
    $("#formdata").submit();
  });

    $("#tree table td").click(function(){
      var parent = $(this).parent();
      var id = parent.attr("data-id");
      var meta = parent.attr("data-meta");
      $.ajax({
        type: "GET",
        url: "/<%= page.getURL() %>",
        data: {request: 'edit', id: id, meta: meta},
        success: function(msg){
          if (msg.substring(0,3) === "NOK") {
            self.warnUser("Got error from server: " + msg);

          } else {
            $("#right_cont").html(msg).show();

            initForm();
          }
        }
      });
    });
  });

</script>

<section>
  <header>
    <% include top.ejs %>
    <% include navigation.ejs %>
  </header>

  <div>

    <div id="left_nav">

      <div id="ltabs">
        <ul class="nav nav-tabs">
          <li class=" <%= (form_show === "N") ? 'active' : '' %>" ><a href="/<%=page.language%>/data?request=list&form_show=N" class="ui-tabs-anchor"><%= __("New")%><%= (form_show === "N") ? (': '+data.length) : '' %></a></li>
          <li class=" <%= (form_show === "T") ? 'active' : '' %>" ><a href="/<%=page.language%>/data?request=list&form_show=T" class="ui-tabs-anchor"><%= __("To Do")%><%= (form_show === "T") ? (': '+data.length) : '' %></a></li>
          <li class=" <%= (form_show === "D") ? 'active' : '' %>" ><a href="/<%=page.language%>/data?request=list&form_show=D" class="ui-tabs-anchor"><%= __("Done")%><%= (form_show === "D") ? (': '+data.length) : '' %></a></li>
          <li class=" <%= (form_show === "A") ? 'active' : '' %>" ><a href="/<%=page.language%>/data?request=list&form_show=A" class="ui-tabs-anchor"><%= __("Archive")%><%= (form_show === "A") ? (': '+data.length) : '' %></a></li>
        </ul>

        <div id="tree" class="ui-corner-bottom">
          <table>
            <% var curr = -1;
               for (var i in data) { %>
              <% if (curr != data[i].atom) {
                  curr = data[i].atom;
                  var thisAtom = app.getAtom(data[i].atom); %>
                <tr><th colspan=3><%= thisAtom.name %></th></tr>
              <% } %>
              <tr data-meta="<%= curr %>" data-id="<%= data[i].id %>">
                <td class="date"><%= formatDate(data[i].created) %></td>
                <td class="status"><%= data[i].statusname %></td>
                <td><%= (typeof data[i].data.name !== "undefined") ? data[i].data.name :
                  (typeof data[i].data.Name !== "undefined") ? data[i].data.Name :
                  (typeof data[i].data.naam !== "undefined") ? data[i].data.naam :
                  (typeof data[i].data.Naam !== "undefined") ? data[i].data.Naam :
                  (getKeyByIndex(data[i].data, 0) + ": " + getValueByIndex(data[i].data, 0))  %></td>
            <% } %>
          </table>
        </div>

      </div>

    </div>

    <div id="right_cont">
      <div id="content_data">
      <form action="/<%=page.language%>/data" method="post" id="formdata">
        <fieldset>
          <input type="hidden" name="form_show" value="<%=form_show%>">
          <input type="hidden" name="request" id="request" value="list">
          <div>
            <label for="subject"><%= __("Subject")%></label><input type="text" name="subject" id="subject" value="<%=subject%>">
          </div>
          <div>
            <label for="content"><%= __("Content")%></label><textarea cols="80" rows="10" id="content" name="content"><%=content%></textarea>
          </div>
          <div>
            <label for="testmail"><%= __("Test mail")%> </label><input type="text" name="testmail" id="testmail" value="<%=testmail%>">
          </div>
          <div>
            <label for="testname"><%= __("Test name")%> </label><input type="text" name="testname" id="testname" value="<%=testname%>">
          </div>
        </fieldset>

        <div id="action_buttons">
          <button id="doSendMail"><%= __("Send Mails")%></button>
          <button id="doTestMail"><%= __("Test Mail")%></button>
        </div>

      </form>
      </div>
    </div>

  </div>

  <% include footer.ejs %>
</section>
</body>
</html>
